<template>
	<view class="userPage">
		<view class="invitebox"></view>
		<view class="bottom">
			<view class="left">
				<view >欢迎注册UFT环球影投</view>
				
				<view>注册激活即送30UFT≈200RMB</view>
				<view class="ca">邀请好友注册激活，即得15UFT≈105RMB</view>
				<view class="ca">(邀请你加入UFT环球影投,长按识别二维码)</view>
			</view>
			<view class="qrcode" v-if="inviteshow">
				<tki-qrcode ref="qrcode" unit='px' background='#fff' foreground='#000' :val="inviteurl" :loadMake='loadMake' :size="size" />
			</view>
		</view>
		<!-- <text>邀请码：{{invitecode}}</text>
		<button @click="downloadImage">保存二维码</button> -->
		<uni-drawer :visible="rightDrawerVisible" mode="right" @close="closeRightDrawer">
			<view style="padding: 30upx;">
				<view class="uni-list uni-common-mt">
					<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in screen" :key="index">
						<view class="uni-list-cell-navigate uni-navigate-right" @tap="golink(item.link)">
							{{item.type}}
						</view>
					</view>
				</view>
			</view>
		</uni-drawer>
	</view>

</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	import uniDrawer from '../../components/uni-drawer.vue';
	export default {

		data() {
			return {
				inviteurl: '',
				size: 100,
				loadMake: true,
				rightDrawerVisible: false,
				screen: [{
						type: '推荐奖励',
						link: '../Recommend/Recommend'
					},
					{
						type: '会员等级',
						link: '../Recommend/Member'
					},
					{
						type: '节点列表',
						link: '../NodeList/NodeList'
					},
					{
						type: '管理分',
						link: '../Recommend/Administration'
					},
				],
				inviteshow: false,
				invitecode: '', //邀请码
			}
		},
		components: {
			tkiQrcode,
			uniDrawer
		},
		onLoad() {
			this.getData();
		},
		onShow() {
			this.rightDrawerVisible = false;
		},
		methods: {
			getData: function() {
				const _this = this;
				//获取邀请码
				this.$request.get("/api/Ucenter/getInviteCode", {})
					.then(res => {
						if (res.data.code == 1) {
							_this.inviteshow = true;
							_this.invitecode = res.data.data.invite_code;
							_this.inviteurl = 'http://www.huanqiuyt.com/web/#/shareregister/' + _this.invitecode;
						}
					})
					.catch(error => {
						console.error('error:', error);
					});
			},
			downloadImage: function() {
				//this.$refs.qrcode.result;获取二维码图片base64位地址,不能保存在变量中.
				var self = this
				let imgurl = self.$refs.qrcode.result;
				uni.showLoading({
					title: '下载中'
				})

				uni.downloadFile({
					url: imgurl,
					success: (res) => {
						uni.hideLoading();
						uni.saveImageToPhotosAlbum({
							filePath: imgurl, //图片路径
							success: function() {
								// alert('save success');
								uni.showToast({
									title: "保存成功",
									icon: "none",
									duration: 2000
								});
							}
						});
					},
					fail: (err) => {
						alert('downloadFile fail, err is:', err)
					}
				})
			},
			golink(link) {
				// 跳转到其他页面
				uni.navigateTo({
					url: link
				})
			},
			closeRightDrawer() { //关闭抽屉式导航
				this.rightDrawerVisible = false;
			},
			showRightDrawer() { //显示抽屉式导航
				this.rightDrawerVisible = true;
			},
		},
		onBackPress() {
			// 返回按钮监听
			if (this.rightDrawerVisible) {
				this.rightDrawerVisible = false;
				return true;
			}
		},
		onNavigationBarButtonTap(e) { //顶部导航右侧点击事件
			this.rightDrawerVisible = !this.rightDrawerVisible
		},
	}
</script>

<style lang="less">
	.userPage {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.invitebox {
			flex: 1;
			width: 100%;
			background: url('http://www.huanqiuyt.com/web/static/image/16.png') no-repeat;
			background-size: 100%;
		}

		.bottom {
			height: 100px;
			width: 100%;
			display: flex;
			font-size: 14px;
			justify-content: space-around;
			align-items: center;
			padding: 20px 0;

			.left {
				display: flex;
				flex-direction: column;
				height: 100%;
				justify-content: space-around; 
				padding-left: 10px;

				.num {
					font-size: 18px;
					color: #4ea3e4;
				}

				.ca {
					font-size: 12px;
				}
			}
			.qrcode {
				width: 120px;
			}

		}


	}

	.uni-list-cell-navigate {
		text-align: center;
		font-size: 14px;
		line-height: 80upx;
		border-bottom: 1px solid #F1F1F1;
	}
</style>
